<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chart_room</title>
    <style>
        .chart_room {
            width: 100%;
            height: 300px;
            border: 1px solid green;
        }
        div {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<!--聊天室-->
<div class="chart_room" id="id_chart_room"></div>
<!--发送按钮-->
<div>
    <input type="text" id="id_text" name="text">
    <input type="button" value="发送" id="id_button">
    <input type="button" value="关闭链接" id="id_close">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function () {
        // 向后台发送短信
        sendMsg();
        colseConn();
    })
    // ws websocket 简写 固定格式创建一个对象
    socket = new WebSocket("ws://106.14.42.253:8766/blue/{{ qq_group }}/")
    // 创建好链接之后自动触发，(服务端执行self.accept())
    socket.onopen = function (event) {
        // 创建标签
        // 添加文本
        // 添加到聊天室
        let $div = $("<div>").text("连接成功");
        $("#id_chart_room").append($div);
    }
    // 当websocket接收到服务端发来的消息时，自动触发这个函数
    socket.onmessage = function (event) {
        // 创建标签
        // 添加文本
        // 添加到聊天室
         let time = new Date();
        let $div = $("<div>").text(event.data);
        let $div1 = $("<div>").text(time.toLocaleString())
        // time.toLocaleString();
        $("#id_chart_room").append($div1).append($div);
        $("#id_text").val('')

    }

    // 客服端向服务端发送信息
    function sendMsg() {
        $("#id_button").click(function () {
            // let 以括号为作用域
            // var 以函数为单位
            let requestObj = '{{ request.chart_web.user.username }}'
            let txt = $("#id_text").val();
            {#socket.send(txt)#}
            var ret = JSON.stringify({txt: txt, requestObj: requestObj})
            socket.send(ret)
        })
    }

    // 断开链接 客服端向服务端发送断开的请求(客服端主动断开链接)
    function colseConn() {
        $("#id_close").click(function () {
            socket.close();
        })
    }

    // 服务端主动断开链接以后，向客户端发送消息，该函数自动执行
    socket.onclose = function (event) {
        // 创建标签
        // 添加文本
        // 添加到聊天室
        let $div = $("<div>").text("断开链接");
        $("#id_chart_room").append($div);
    }
</script>
</body>
</html>